<template>
    <div class="flex flex-col w-full bg-body rounded-lg">
        <!-- 选项 -->
        <div class="flex justify-between  border-b p-3">
            <el-radio-group v-model="taskIndex" @change="changeType">
                <el-radio-button
                    v-for="(item, index) in taskLists"
                    :key="index"
                    :value="item.value"
                >
                    {{ item.name }}
                </el-radio-button>
            </el-radio-group>

            <paging
                v-if="pager.lists.length > 0"
                v-model="pager"
                layout="prev, pager, next"
                @change="queryLists"
            />
        </div>

        <!-- 展示 -->
        <div v-if="pager.lists.length > 0" class="p-4 flex-1 flex flex-col overflow-hidden">
            <div class="flex flex-1 gap-6 overflow-hidden">
                <div class="flex-1">
                    <music-lists :lists="pager.lists" />
                </div>
                <music-showing />
            </div>

            <div class="mt-4">
                <music-player />
            </div>
        </div>

        <div v-else class="h-full flex flex-col items-center justify-center">
            <icon
                :size="60"
                name="svg-icon-Music"
                color="var(--el-text-color-placeholder)"
            />
            <div class="my-4 text-tx-secondary">当前还没有音乐哦</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import MusicLists from './music-lists.vue'
import MusicPlayer from './music-player.vue'
import MusicShowing from './music-showing.vue'
import { pager, queryLists, queryParams } from '../hooks/useMusicEffect'

const taskIndex = ref<number>(0)
const taskLists = [
    { name: '全部', value: 0 },
    { name: '生成中', value: 1 },
    { name: '生成成功', value: 2 },
    { name: '生成失败', value: 3 }
]

const changeType = async (_status: any) => {
    queryParams.status = _status
    await queryLists()
}

onMounted(async () => {
    await queryLists()
})
</script>
